Willkommen, live von den JavaScript Days in München zurzeit. Die nächste Edition ist in Berlin, aber wir haben uns jetzt schon mal ein paar Trainer geschnappt und führen Interviews mit Ihnen durch und ich habe hier auch schon Thomas Puppe von ZEIT ONLINE.
Schön, dass du da bist. Nochmal kurz zu dir. Du bist Thomas Puppe von ZEIT ONLINE und bist tätig als Senior Web Developer in Berlin und neben den normalen Feature Entwicklungen bist du auch dafür bekannt, dass du Webseiten zugänglicher machst für Mensch und Maschine. Und das ist jetzt auch dein Schwerpunkt hier auf dem Summit. Dein Workshop ging um Web-Performance und gleich stelle ich dir auch noch ein paar Fragen dazu, wie man seine Seite so ein bisschen modernisiert und aufboostert.
Noch eine Frage vorweg: Was ist denn für dich persönlich das Spannendste an deiner Arbeit?
Das Spannendste ist eigentlich, dass man nie ausgelernt hat, würde ich sagen. Also das Web und die Browser und die ganze Servertechnologie und dann alles, was im Frontend passiert, da kommt immer so viel Neues dazu und selbst wenn nichts Neues dazu kommt, man kann immer tiefer eintauchen. Und wenn du denkst du hast ein Thema verstanden dann kommt jemand um die Ecke und zeigt dir einen komplett neuen Aspekt. Und das finde ich sehr spannend, dass es einfach nicht aufhört.
Dann erzähl mal. Also es ist eigentlich eine ganz große Frage. Wir haben jetzt mittlerweile 5G und Multi-Kernprozessoren. Warum sind unsere Webseiten immer noch so langsam? Also nicht alle, aber viele.
Ich glaube das hat mehrere Gründe. Zum einen den Technischen. Also es kommt immer mehr auf die Seiten drauf, sei es größere Fotos, bessere Videos oder neue Frameworks. Und das sorgt halt dafür, dass erstmal Seiten immer schwerer werden per se technisch, was Kilobytes angeht. Und dann gibt es glaube ich noch ein großes Defizit darin, dass man zum Beispiel in der Performance optimiert. Die Seite ist ja nicht per se langsam, nur weil sie React oder Angular verwendet. Das ist ja Quatsch. Und all die Technologien haben auch ihre Berechtigung. Jedes Tracking, jede Werbung hat ihre Berechtigung. Aber man kann die Sachen – ich sage immer so grob handwerklich – richtig und falsch machen. Und da gibt es glaube ich noch viel Schulungsbedarf oder viel fehlendes Bewusstsein, was aus meiner Sicht aber nicht nur eine Sache des Wissens ist. Die Entwickler sind alle motiviert Sachen besser zu machen. Ich glaube es fehlt auch noch viel Performance-Kultur in den Firmen. Also es wird viel Aufwand betrieben für SEO und es wird mancher Aufwand betrieben für Accessibility. Und genau das fehlt mir für die Performance, weil am Ende ist Performance auch eine Art von Accessibility und Performance ist vor allem gut für SEO. Und wenn das mit der gleichen Dringlichkeit behandelt würde, dann wäre das wird auch schneller.
Klingt nach einem guten Appell. Und das Ganze hat auch mit dem Google Ranking zu tun. Also wie wichtig ist wirklich die Website Performance für das Google Ranking?
Das lässt sich nicht so ganz beziffern, denn Google lässt sich natürlich nicht in die Karten schauen. Man weiß nicht welchen Anteil jetzt Performance im Vergleich zu Inhalten hat, sage ich mal. Aber wir wissen, das hat Google ja auch gesagt, dass die Performance auf jeden Fall einen Einfluss aufs Ranking hat – für Desktop-Seiten schon seit 2010, für Mobil seit 2018. Und seitdem haben verschiedene Firmen, Studien durchgeführt, haben Performance verbessert und danach ihr Google Ranking beobachtet. Und da gibt es Dutzende von Untersuchungen, die nahelegen, dass sich das Ranking dann direkt verbessert, nicht nur das Google Ranking. Es verbessern sie auch Sachen wie die Absprungrate, die sich verschlechtert, es werden mehr Käufe getätigt, es werden mehr Seiten besucht während einem Gesetz – also mehr Seiten geklickt während einem Besuch. Egal was man anguckt die ganze Interaktion mit den Seiten und das Engagement, worauf wir immer so gern geschaut wird, wird besser je schneller die Seiten sind.
Klingt gut. Gibt es auch bestimmte Metriken, die entscheidend sind für die Bewertung von Webseiten und kannst du uns diese nennen?
Ja, die gibt’s auch. Da ist Google transparent und macht viel Werbung dafür. Wir kommen aus einer Zeit, da wurde vor allem auf die Ladezeit geguckt und auf die Größe von Seiten, also in Kilobyte oder Megabyte. Das war dann aber mit der Zeit nicht mehr aussagekräftig genug und dann hat Google sogenannte Web Vitals benannt, also Vitalitätsmetriken einer Webseite. Da würde ich jetzt mal drei hervorheben. Das eine ist der sogenannte Largest Contentful Paint. Der besagt einfach wie lange dauert es, bis der größte, sichtbare Bereich auf der Webseite ist und stabil steht. Das ist relevant. Was dann noch unterhalb von dem passiert ist, nicht mehr so richtig, denn für den Besucher ist die Seite da und fertig. Eine zweite wichtige Sache ist der sogenannte Layout shift. Wenn während dem Besuch der Seite oder während dem Laden durch nachgeladene Elemente immer wieder die Seite durch die Gegend springt und sich Texte nach unten verschieben, weil Bilder nachgeladen werden und solche Sachen, dann shiftet das Layout. Auch das lässt sich messen und auch das bezieht Google in das Ranking mit ein als einen dieser Vitals. Der dritte Punkt ist Interaction: Ist die Seite responsiv, wenn ich draufklicke? Passiert dann direkt was? Oder wenn ich die Seite lade, kann ich sofort mit dir interagieren oder hängt sie erstmal? Das wäre die dritte Metrik. Und alle drei Sachen lassen sich messen und damit auch optimieren. Ich finde das eine ganz gute Entwicklung, weil es halt wirklich die User Experience anspricht und nicht nur eine reine Zahl oder keine abstrakte Zahl ist, sondern ganz konkret darauf einzahlt: Ist die Seite schnell da? Reagiert sie? Funktioniert sie schön für mich?
Okay und du meintest gerade bereits es gibt diese Metriken und man kann sie auch messen. Kannst du uns ein paar Tools empfehlen, womit man sie gut überprüfen kann?
In dem Workshop heute haben wir vor allem mit dem Browser DevTools gearbeitet. Also die eingebauten Tools die jeder Chrome, Edge und Firefox und Safari mitbringt. Mit den kommt man schon sehr weit. Gerade diese Web Vitals, die ich aufgezählt habe, kann man direkt während seiner Entwicklung in der Entwicklungsumgebung testen. Darauf aufsetzend, gibt es auch Tools, wie zum Beispiel Lighthouse. Das ist auch ein Tool, was in dem Browser Developer Tools mit eingebaut ist. Das gibt einem auch diese Metriken und gibt aber gleichzeitig Verbesserungsvorschläge. Also mein Browser sagt mir sogar was ich noch nicht optimal mache, was ich verbessern sollte und worauf ich achten sollte. Man muss halt nur wissen, wo man guckt. Das ist das eine Verbesserung. Und dann finde ich aber noch ganz wichtig Tools, mit denen man diese Optimierung transparent nach außen bringt. Damit meine ich firmenintern. Dashboards bauen, damit man sieht, wie sich die Performance unseres Shops entwickelt oder um Konkurrenzvergleiche zu machen – wie steht meine Seite gegenüber der Konkurrenz. Dafür nutze ich immer ein Tool. Das nennt sich SpeedCurve. Das hat schöne Dashboards und gute Benchmarks. Und mit diesen Dashboards kann ich auch mal in die Chefetage gehen und kann zeigen, wie unsere Lage aussieht, da können wir uns verbessern und da ist die Konkurrenz besser. Das finde ich ist jetzt der zweite Teil dieser Performance-Arbeit: Kultur zu schaffen in der Firma, um das Vertrauen zu verbessern und einfach dieses Bewusstsein zu wecken.
Stay tuned
Immer auf dem Laufenden bleiben! Alle News & Updates:
Kann man auf jeden Fall schon mal ausprobieren. Eine letzte Frage habe ich noch. Und zwar: Du hast gerade ein paar Tricks und Tipps genannt. Kannst du uns vielleicht als Sneak Preview einen konkreten Tipp geben, den man wirklich so umsetzen kann?
Was heute glaube ich ganz gut ankam bei den Entwicklern und Entwicklerinnen. Sie arbeiten ja viel. Wir sind auf den JavaScript Days und es wird viel mit React und Angular gearbeitet. Und so passiert es, dass bestimmte Ressourcen nicht gleich im ersten HTML-Load auf der Seite stehen. Ein Beispiel wäre so ein Hero Video, was von der Angular- oder React-App erst in die Seite gebracht wird oder die Web-Front, die im CSS der Seite steht. Das sind Sachen die kann der Browser erst spät entdecken, weil zum Beispiel muss die React-App abgeladen und ausgeführt werden, dann bringt sie das Video in die Seite und das lädt der Browser. Und das gibt es in HTML schon seit Ewigkeiten, aber es ist relativ unbekannt, das sogenannte Preload Attribut. Damit kann ich schon ganz oben, das ist einer der ersten Kilobytes, die geladen werden von der Seite, kann ich dem Browser schon ankündigen: Guck mal, du wirst nachher diese Schriftart und du wirst nachher dieses Video brauchen. Dann wird das parallel geladen und wenn meine React-App dann fertig ist und das Video in die Seite einbindet, ist es schon da. Dann hat der Computer das schon aus dem Netz gezogen. Das ist ein ziemlich simpler Trick, aber hatten sehr guten und großen Effekt.
Danke dass du da warst und Fragen beantwortet hast. Und falls ihr Interesse habt: Der nächste Summit kommt im Oktober. Da sind wir in Berlin.
